<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>detailUser_course.jsp</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<style type="text/css">
p span{color: blue;}
</style>
</head>
<body>
	<h2>（课程名单）detailUser_course.jsp</h2>
	<p>课程号：<span id="courseid">${user_course.courseid }</span><br>
	   课程名：<span>${user_course.coursename }</span><br>
	   学分：<span>${user_course.credit }</span><br>
	   学院：<span>${user_course.departname }</span><br>
	   教师：<span>${user_course.teachername }</span>
	</p>
	
	<table id="students">
	<thead>
		<tr><th>序号</th><th>学号</th><th>学生姓名</th><th>性别</th><th>操作</th></tr>
	</thead>
	<tbody>
		<c:forEach items="${user_course.students}" var="student" varStatus="xh">
			<tr><td>${xh.count }</<td><td>${student.id }</td><td>${student.username }</td><td>${student.sex }</td>
				<td><a href="javascript:;" onclick="deleteCourseStudent(${student.id})">删除</a></td>
			</tr>
		</c:forEach>
	</tbody>
	</table>
	<a href="selectAllCourseStudents.do">返回</a><br>
	
	<select name="uid" id="uid" required="required">
    	<option value="">请选择</option>
	</select>
	
	<button id="btnSubmit" style="border-radius: 4px;background-color: rgb(62,222,131);padding: 3px;">添加</button>
	<script type="text/javascript">
		$("table").find("tr").find("td:eq(1)").css('text-align','center');
	</script>
	
	<script type="text/javascript">
	//学生退课
	function deleteCourseStudent(uid){
		var courseid = $("#courseid").text();
		//找到表格里边的ID
		if(courseid==''){
			return;
		}
		if(!confirm("是否删除 "+uid+"?")){
			return;
		}
		$.ajax({
		    url: 'deleteCourseStudent.do',
		    type: 'POST',
		    data: {"courseid": courseid,"uid":uid},
		})
		.done(function() {
		    console.log("success");
		    alert(uid+" 退课成功！");
		    refreashTable(courseid);
		    getNoCourseStudents(courseid);
		})
		.fail(function() {
		    console.log("error");
		    alert(uid+ " 退课失败！");
		})
		.always(function() {
		    console.log("complete");
		});

	}
	
	//刷新表格数据函数
	function refreashTable(courseid){
        $.ajax({
            type:"POST",
            //contentType: "application/json;charset=UTF-8",//不能再用默认，
            url:"getStudentsByCourseid.do",
            data:{"courseid":courseid},
            success:function(data){
                //var table = $("#students");
                var innerTable ="";
                //alert(data.length);
                if(data.length==0) return;
                 for(var i=0;i<data.length;i++){
                    var id=data[i].id;
                    var username=data[i].username;
                    var sex=data[i].sex;
                    innerTable+="<tr><td>"+i+"</td><td>"+id+"</td><td>"+username+"</td><td>"+sex
                    +"</td><td>"
                    +"<a href='javascript:;' onclick='deleteCourseStudent("+id+")'>删除 </a></td>"
                    +"</tr>";
                }
                 
                 $("table tbody").html(innerTable);
            },error:function(data){
                alert("系统错误");
            }
        });
	}
	
	//getNoCourseStudents
	function getNoCourseStudents(courseid){
		$.ajax({
		    url: 'getNoCourseStudents.do',
		    type: 'POST',
		    data: {'courseid': courseid},
		    timeout: 3000,
		})
		.done(function(data) {
		    console.log("success");
		    console.log(data);
		    $("#uid").empty();
		    for(var i=0;i<data.length;i++){
		    	$("#uid").append("<option value='"+ data[i].id  +"'>"+data[i].username+"*"+data[i].id+"</option>");
		    }
		})
		.fail(function(data) {
		    console.log("error");
		})
		.always(function(data) {
		    console.log("complete");
		});
	}
	
	function addCourse(courseid,uid){
        $.ajax({
            url: 'addCourseStudent.do',
            type: 'POST',
            data: {"uid": uid,'courseid':courseid},
        })
        .done(function() {
            console.log("success");
            alert(uid+" 添加成功！");
            /* 添加成功之后刷新表格 */
			refreashTable(courseid);
        })
        .fail(function() {
            console.log("error");
            alert(uid+" 添加失败！");
        })
        .always(function() {
            console.log("complete");
        });		
	}
	
	$(document).ready(function() {
		var courseid = $("#courseid").text();
		//自动从数据库获得没有添加该课程的学生列表，并生成下拉菜单
		getNoCourseStudents(courseid);
		
		//添加学生
	    var btnSubmit = $("#btnSubmit");
		//向数据库添加选课的学生
	    btnSubmit.click(function(event) {
	    	var uid = $('#uid option:selected').val();
	        if(uid!=''&&courseid!=''){
				addCourse(courseid,uid);
				//重新刷新没有选课的学生名单
				getNoCourseStudents(courseid);
	        }else{
	            return;
	        }
	    });
	});
	</script>
</body>
</html>